function StudentInfoTable (props) {
  console.log(props)
  // 学生人数
  const len = props.studentList.length
  // 计算学生平均年龄
  function getAverageAge () {
    if (len === 0) {
      return 0
    }
    const totalAge = props.studentList.reduce((total, cur) => {
      return total + Number(cur.age)
    }, 0)
    return (totalAge / len).toFixed(2)
  }
  // 删除学生
  function deleteStudent (index) {
    props.handler(index)
  }

  return (
    <div className='col-md-6 col-md-offset-1'>
      <table className='table table-striped table-hover'>
        <thead>
          <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>入学时间</th>
            <th>爱好</th>
            <th>所属学院</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {/* <tr>
                    <td>01</td>
                    <td>张三</td>
                    <td>男</td>
                    <td>20</td>
                    <td>2020-08-02</td>
                    <td>
                        <span>足球</span>
                    </td>
                    <td>python</td>
                    <td>
                        <a href="">删除</a>
                        <a href="">修改</a>
                    </td>
                </tr> */}
          {props.studentList.map((student, index) => {
            return (
              <tr key={student.number}>
                <td>{student.number}</td>
                <td>{student.name}</td>
                <td>{student.sex}</td>
                <td>{student.age}</td>
                <td>{student.date}</td>
                <td>{student.hobbies.join('，')}</td>
                <td>{student.subject}</td>
                <td>
                  <button
                    onClick={() => {
                      deleteStudent(index)
                    }}
                  >
                    删除
                  </button>
                </td>
              </tr>
            )
          })}
        </tbody>
      </table>
      {len ? '' : <p className='text-center'>无学生信息</p>}
      <p>总共有 {len} 个学生</p>
      <p>学生的平均年龄是 {getAverageAge()}</p>
    </div>
  )
}
export default StudentInfoTable
